import {useRef,useEffect,useMemo,useState} from 'react'
import * as echarts from 'echarts'
import axios from 'axios'
export default ()=>{
    const chartRef=useRef()
    const [list,setList]=useState([])
    const options=useMemo(()=>({
        title:{
            text:'某公司2022年1-6月份收益情况'
        },
        xAxis:{
            data:['1月份','2月份','3月份','4月份','5月份','6月份']
        },
        yAxis:{},
        series:[
            {
                type:'bar',
                data:list
            }
        ]
    }),[list])
    const getData=async()=>{
        const result=await axios.get('https://www.fastmock.site/mock/d550ebe10fa16e11d2e101275d951ca5/w16/getData')
        console.log('result',result.data);
        setList(result.data)
    }
    useEffect(()=>{
        getData()
        let myChart=echarts.init(chartRef.current)
        myChart.setOption(options)
    },[])
    return(<>
       <div style={{width:'600px',height:'400px',backgroundColor:'#ccc'}} ref={chartRef}></div>
    </>)
}